<template>
  <div>
    <div>
      <h1>收入类型</h1>
    </div>
    <div>
      <el-form :inline="true" :model="selectForm" class="demo-form-inline">
        <el-form-item label="分类">
          <template>
            <el-select v-model="selectForm.type" placeholder="请选择分类">
              <el-option
                v-for="item in baseCommonTypeList"
                :key="item.type"
                :label="item.typeName"
                :value="item.type">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="selectForm.baseCommonName" placeholder="请输入名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="info" @click="getListByParams()" style="padding-left: 15px">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="initInsertAndUpdate()" style="padding-left: 15px">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="entityList"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          sortable
          width="100">
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="名称">
        </el-table-column>
        <el-table-column prop="state" label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" >
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="initInsertAndUpdate(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteCheck(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right;padding-right: 5%;padding-top: 20px">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>

    <!--  弹窗 : 新增/修改  -->
    <el-dialog
      :title="!insertAndUpdateForm.id ? '新增' : '修改'"
      :visible.sync="insertAndUpdateVisible"
      width="40%"
    >
      <el-form ref="insertAndUpdateForm" :rules="rules" :model="insertAndUpdateForm" label-width="40%">
        <el-form-item label="名称："  style="width: 70%" prop="typeName">
          <el-input v-model="insertAndUpdateForm.typeName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="默认账户"  style="width: 70%">
          <template>
            <el-select v-model="insertAndUpdateForm.moneyAccountId" placeholder="请选择" @change="getAccountChange()">
              <el-option
                v-for="item in AccountList"
                :key="item.id"
                :label="item.accountName"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="是否启用：" style="width: 70%">
          <el-switch
            v-model="insertAndUpdateForm.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
        
        <el-form-item label="备注：" style="width: 70%" prop="remark">
          <el-input type="textarea" v-model="insertAndUpdateForm.remark"></el-input>
        </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insertAndUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDtoInit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "inMoneyType",
  data() {
    return {
      loading: false,
      insertAndUpdateVisible: false,
      rules: {
          typeName: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          moneyAmount: [
            { required: true, message: '请输入名称', trigger: "blur" }
          ],
      },    
      insertAndUpdateForm: {
        typeName: '',
        moneyAccountId: '',
        remark: '',
        state: 1
      },
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      baseCommonTypeList: {
        type: '',
        typeName: ''
      },
      selectForm: {
        type: '',
        baseCommonName: ''
      },
      entityList: [
       
      ],
      outMoneyList: [],
      AccountList: [],
    }
  },
  created() {
    this.getListByParams();
  },
  methods: {
    // 获取公共字段所有类型
    async getBaseCommonTypeList() {
      const {data: res} = await this.$http.get("/sysBaseCommon/getBaseCommonTypeList")
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.baseCommonTypeList = res.baseCommonTypeList;
    },
    // 条件分页查询
    async getListByParams() {
      const {data: res} = await this.$http.get("/inMoneyType/getPageByParams", {
        params: {
          type: this.selectForm.type,
          value: this.selectForm.baseCommonName,
          pageNo: this.pageIndex,
          pageSize: this.pageSize
        }
      })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.entityList = res.data.records
      this.totalPage = res.total
    },
    updateDtoInit() {
      let isAdd  = this.insertAndUpdateForm.id;
      this.$refs['insertAndUpdateForm'].validate(async valid => {
        if (valid) {
          let url = !isAdd ? '/inMoneyType/saveOne' : '/inMoneyType/updateOne'
          const {data: res} = await this.$http.post(url, this.insertAndUpdateForm)
          if (res.code != 200) {
            return this.$message.error(res.msg)
          }
          console.log(res)
          this.$message.success(res.msg)
          this.insertAndUpdateVisible = false
          this.getListByParams()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 新增或修改弹窗初始化
    initInsertAndUpdate(row) {
      this.insertAndUpdateVisible = true;
      if(this.$refs['insertAndUpdateForm']) {
        this.resetForm('insertAndUpdateForm')
      }
      if(row) {
        Object.assign(this.insertAndUpdateForm, row)
      }
      this.getAccount()
    },
    // 删除
    deleteCheck(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteMenu(id)
      })
    },
    // 逻辑删除
    async deleteMenu(id) {
      if(id) {
        const {data : res} = await this.$http.get("inMoneyType/deleteOne?id=" + id)
        if (res.code != 200) {
          return this.$message.error(res.msg)
        }
        this.getListByParams()
        this.$message.success(res.msg)
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getListByParams()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getListByParams()
    },
    async getAccount() {
      const {data: res} = await this.$http.get("/capitalAccount/getAll")
      if (res.code == 200) {
        this.AccountList = res.data
      }
    },
    getAccountChange() {

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.insertAndUpdateForm = {
        typeName: '',
        moneyAccountId: '',
        remark: '',
        state: 1
      }
    }
  }
}
</script>

<style scoped>

</style>
